<template>
  <div class="steps">
    <PMNewConfigBack/>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="基本信息"/>
      <el-step title="人员配置"/>
      <el-step title="进度配置"/>
    </el-steps>
    <div class="ConfigFormThird">
      <ProgressConfigForm/>
    </div>
    <el-row gutter="20">
      <el-col :span="6" style="display: flex">
        <el-button style="margin-top: 12px;flex: 1" type="primary" @click="returnFirst">上一步</el-button>
      </el-col>
      <el-col :span="12"/>
      <el-col :span="6" style="display: flex">
        <el-button style="margin-top: 12px;flex: 1" type="primary" @click="toNext">下一步</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue'
import type {FormInstance} from 'element-plus'
import router from '@/router'
import {useProgressConfigStore} from '@/stores/ProgressConfig'
import {usePMConfig} from '@/stores/PMConfig'

const PMConfig = usePMConfig()
const ProgressConfigStore = useProgressConfigStore()

const active = ref(2)
const ruleFormRef = ref<FormInstance>()
const PWithIn: any = ref(null)
const PWithOut = ref(null)

const toNext = () => {
  let num = 0
  console.log(PMConfig.getMonthDifference())
  for (let i = 0; i < PMConfig.getMonthDifference(); i++) {
    if (ProgressConfigStore.tabledata[i].plan != '' && ProgressConfigStore.tabledata[i].show != false) {
      num++
    }
  }
  if (num == PMConfig.getMonthDifference()) {
    router.push('/home/programmanagement/newconfig/finally')
  } else {
    console.log('未填写完全')
  }
}

const Insert = () => {
  PWithIn.value.insertSelect()
}
const Release = () => {
  PWithOut.value.releaseSelect()
}

const returnFirst = () => {
  router.push('/home/programmanagement/newconfig/2')
}

</script>
<style lang="scss" scoped>
.ConfigFormThird {
  width: 100%;
  margin: 40px 0;
  height: 540px
}

.el-date-editor.el-input, .el-date-editor.el-input__inner {
  width: 100%;
}

.steps {
  width: 95%;
  height: 40%;
  margin: auto;

  ::v-deep(.el-step__icon) {
    width: 50px;
    height: 50px;
    font-size: 40px;
  }
}
</style>
